<template>
    <div>
        <Row type="flex" justify="center" class="code-row-bg">
            <!--左侧-->
            <ICol span="16">
                <!--搜索框-->
                <Card dis-hover>
                    <div class="ivu-page-header-detail"><!----> <!---->
                        <div class="ivu-page-header-main">
                            <div class="ivu-page-header-row"><!---->
                                <div class="ivu-page-header-title">搜索列表（文章）</div> <!----></div>
                            <div class="ivu-page-header-row">
                                <div class="ivu-page-header-content">
                                    <div class="ivu-mt ivu-mb" style="max-width: 500px; margin: 0px auto;">
                                        <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type-text ivu-input-group ivu-input-group-large ivu-input-group-with-append ivu-input-with-search">
                                            <!----> <!----> <i
                                                class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                            <input autocomplete="off" spellcheck="false" type="text"
                                                   v-model="articleVo.title" @keyup.enter="getBlogArticle"
                                                   placeholder="请输入文章标题..." class="ivu-input ivu-input-large">
                                            <div class="ivu-input-group-append ivu-input-search"
                                                 @click="getBlogArticle">搜索
                                            </div>
                                        </div>
                                    </div>
                                </div> <!----></div>
                        </div>
                    </div>
                    <!--分类-->
                    <div style="margin-top: 20px">
                        <span>分类：</span>
                        <div style="margin-left: 40px;margin-top: 6px">
                            <RadioGroup v-model="articleVo.cateId" @on-change="getBlogArticle">
                                <Radio style="margin-bottom: 10px;font-weight: bolder" :label="0" border>全部</Radio>
                                <Radio style="margin-bottom: 10px" v-for="(item,index) in categoryList" :key="index"
                                       :label="item.cateId" border>
                                    {{item.cateName}}
                                </Radio>
                            </RadioGroup>
                        </div>
                    </div>
                </Card>
                <h3 style="border-left: 4px solid deepskyblue;margin-top: 40px;padding-left: 6px;margin-bottom: 10px">
                    博客文章</h3>
                <List item-layout="vertical">
                    <Card style="margin-bottom: 2%" v-for="(article,index) in articleList" :key="index">
                        <router-link :to="`/articleDetail/${article.aid}`">
                            <ListItem style="text-align: left">
                                <ListItemMeta :avatar="article.user.uheadpicture"
                                              :description="article.aCreatetime"><h3 slot="title">
                                    {{article.atitle}}</h3>
                                </ListItemMeta>
                                {{ article.adesc }}
                                <template slot="action">
                                    <li>
                                        <Icon type="md-eye"/>
                                        {{article.avisitcount}}
                                    </li>
                                    <li>
                                        <Icon type="md-heart"/>
                                        {{article.alikecount}}
                                    </li>
                                </template>
                                <div slot="extra" style="width: 280px;height: 140px;overflow: hidden">
                                    <img class="desImg"
                                         :src="article.apicture!==null?article.apicture.split(',').slice(0,1):articleDefault"
                                         style="width: 280px;height: 140px">
                                </div>
                            </ListItem>
                        </router-link>
                    </Card>
                </List>
                <!--分页-->
                <div>
                    <Page style="height: 30px;margin-top: 1%" :total="total" :page-size="articleVo.pageSize"
                          show-elevator show-sizer
                          show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                          @on-page-size-change="changePageSize"/>
                </div>
            </ICol>
            <!--右侧-->
            <ICol span="6" style="margin-left: 2%">
                <Sider/>
            </ICol>
        </Row>
    </div>
</template>

<script>
  import Sider from '../components/sider/Sider'

  export default {
    data () {
      return {
        categoryList: [],
        articleVo: {
          pageNum: 1,
          pageSize: 10,
          title: '',
          cateId: 0,
          status: 0
        },
        total: 0,
        articleDefault: 'https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/meaningoflife/1.jpeg',
        articleList: [],
        pageSizeChoice: [10, 20, 50, 100, 200]
      }
    },
    components: {
      Sider
    },
    mounted () {
      this.getCategorys()
      this.getBlogArticle()
    },
    methods: {
      getCategorys () {
        this.$http.get('category').then(res => {
          res = res.data
          if (res.code === 0) {
            this.categoryList = res.data
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      },
      // 获取文章列表
      getBlogArticle () {
        this.$http.get('article', { params: new URLSearchParams(this.articleVo) }).then(res => {
          res = res.data
          if (res.code === 0) {
            this.articleList = res.data
            this.total = res.count
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      },
      // 改变当前页码
      changePageNum (pagenum) {
        this.articleVo.pageNum = pagenum
        this.getBlogArticle()
      },
      // 改变每页个数
      changePageSize (pagesize) {
        this.articleVo.pageSize = pagesize
        this.getBlogArticle()
      }
    }
  }
</script>

<style scoped>

</style>
